<template>
  <a-drawer
    :title="dialog.title"
    :visible="dialog.visible"
    :width="460"
    @cancel="handleCancel"
    :footer="false"
    ref="operLogFormRef"
  >
    <div class="arco-descriptions arco-descriptions-layout-horizontal arco-descriptions-size-medium arco-descriptions-border">
      <div class="arco-descriptions-body">
        <table class="arco-descriptions-table">
          <tbody>
            <tr class="arco-descriptions-row">
              <td class="arco-descriptions-item-label arco-descriptions-item-label-block">请求路由</td>
              <td class="arco-descriptions-item-value arco-descriptions-item-value-block" colspan="1">
                {{ currentRow?.operationUrl }}
              </td>
            </tr>
            <tr class="arco-descriptions-row">
              <td class="arco-descriptions-item-label arco-descriptions-item-label-block">操作用户</td>
              <td class="arco-descriptions-item-value arco-descriptions-item-value-block" colspan="1">
                {{ currentRow?.operationName }}
              </td>
            </tr>
            <tr class="arco-descriptions-row">
              <td class="arco-descriptions-item-label arco-descriptions-item-label-block">请求方法</td>
              <td class="arco-descriptions-item-value arco-descriptions-item-value-block" colspan="1">
                {{ currentRow?.requestMethod }}
              </td>
            </tr>
            <tr class="arco-descriptions-row">
              <td class="arco-descriptions-item-label arco-descriptions-item-label-block">响应代码</td>
              <td class="arco-descriptions-item-value arco-descriptions-item-value-block" colspan="1">
                {{ currentRow?.code }}
              </td>
            </tr>
            <tr class="arco-descriptions-row">
              <td class="arco-descriptions-item-label arco-descriptions-item-label-block">业务名称</td>
              <td class="arco-descriptions-item-value arco-descriptions-item-value-block" colspan="1">
                {{ currentRow?.title }} / {{ typeFormat(currentRow) }}
              </td>
            </tr>
            <tr class="arco-descriptions-row">
              <td class="arco-descriptions-item-label arco-descriptions-item-label-block">操作时间</td>
              <td class="arco-descriptions-item-value arco-descriptions-item-value-block" colspan="1">
                {{ currentRow?.operationTime }}
              </td>
            </tr>
            <tr class="arco-descriptions-row">
              <td class="arco-descriptions-item-label arco-descriptions-item-label-block">用户IP</td>
              <td class="arco-descriptions-item-value arco-descriptions-item-value-block" colspan="1">
                {{ currentRow?.operationIp }}
              </td>
            </tr>
            <tr class="arco-descriptions-row">
              <td class="arco-descriptions-item-label arco-descriptions-item-label-block">用户地点</td>
              <td class="arco-descriptions-item-value arco-descriptions-item-value-block" colspan="1">
                {{ currentRow?.operationLocation }}
              </td>
            </tr>
            <tr class="arco-descriptions-row">
              <td class="arco-descriptions-item-label arco-descriptions-item-label-block">请求数据</td>
              <td class="arco-descriptions-item-value arco-descriptions-item-value-block" colspan="1">
                {{ currentRow?.operationParam }}
              </td>
            </tr>
            <tr class="arco-descriptions-row">
              <td class="arco-descriptions-item-label arco-descriptions-item-label-block">响应数据</td>
              <td class="arco-descriptions-item-value arco-descriptions-item-value-block" colspan="1">
                {{ currentRow?.jsonResult }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </a-drawer>
</template>
<script setup lang="ts">
import { formatJson } from "@/utils/common";

const currentRow = ref<any>({});

const dialog = reactive<DialogOption>({
  visible: false,
  title: "详情信息"
});

// 取消
const handleCancel = () => {
  dialog.visible = false;
};

const open = async (row: any) => {
  dialog.visible = true;
  currentRow.value = row;
  if (row.operationParam.length > 0) {
    // @ts-ignore
    currentRow.value.operationParam = !/\\\\/g.test(row.operationParam)
      ? formatJson(currentRow.value.operationParam)
      : currentRow.value.operationParam.replace(/,/g, ",\n");
  }
  if (row.jsonResult.length > 0) {
    // @ts-ignore
    currentRow.value.jsonResult = !/\\\\/g.test(row.jsonResult)
      ? formatJson(currentRow.value.jsonResult)
      : currentRow.value.jsonResult.replace(/,/g, "\n");
    currentRow.value.code = JSON.parse(currentRow.value?.jsonResult).code;
  }
};

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// @ts-ignore
const { sys_oper_type } = toRefs<any>(proxy?.useDict("sys_oper_type"));

/** 操作日志类型字典翻译 */
const typeFormat = (row: any) => {
  // @ts-ignore
  return proxy?.selectDictLabel(sys_oper_type.value, row.businessType);
};

defineExpose({
  open
});
</script>
<style scoped lang="less">
:deep(.arco-collapse-item-content) {
  padding-left: 10px;
  padding-right: 10px;
}
</style>
